<template>
  <div>
    <div class="topset">
      <div class="touxiang"></div>
      <div class="Nickname">coco@
        <van-tag type="success" round>钻石会员</van-tag>
      </div>
      <div class="Nicknametag">
        <van-icon style=" margin: 0 5px;" name="manager-o"/>
        <van-icon name="chat-o" dot/>
      </div>
    </div>
    <div>
      <!-- closeable 模式，在右侧显示关闭按钮 -->
      <van-notice-bar mode="closeable">北京昨日新增境外输入病例2例，出院6例 外交部正向留学生集中国家调配健康包，含一千多万个口罩</van-notice-bar>
    </div>
    <div class="zhongjian">
      <div class="dingdan">
        <h2>全部订单</h2>
        <van-grid>
          <van-grid-item style=" text-align: center; font-size: 14px;">1
            <br>
            <br>商品关注
          </van-grid-item>
          <van-grid-item style=" text-align: center; font-size: 14px;">0
            <br>
            <br>店铺关注
          </van-grid-item>
          <van-grid-item style=" text-align: center ; font-size: 14px; ">30
            <br>
            <br>喜欢的内容
          </van-grid-item>
          <van-grid-item style=" text-align: center; font-size: 14px;">50
            <br>
            <br>浏览记录
          </van-grid-item>
          <van-grid-item icon="idcard" text="待付款"></van-grid-item>
          <van-grid-item icon="send-gift-o" text="待收货"></van-grid-item>
          <van-grid-item icon="comment-circle-o" text="待评价"></van-grid-item>
          <van-grid-item icon="balance-pay" text="退换/售后"></van-grid-item>
        </van-grid>
      </div>
      <div>
        <van-divider :style="{ color: '#ccc', borderColor: '#1989fa', padding: '0 16px' }">精品推荐</van-divider>
      </div>
    </div>
    <div class="tupian">
      <img src="https://fanhc.xyz/pyg/pic_floor01_5@2x.png" alt="">
      <img src=" https://fanhc.xyz/pyg/pic_floor01_2@2x.png" alt="">
      <img src="https://fanhc.xyz/pyg/pic_floor01_3@2x.png" alt="">
      <img src="https://fanhc.xyz/pyg/pic_floor01_4@2x.png" alt="">
    </div>
    <!-- 底部区域 -->
    <van-tabbar v-model="active" fixed border="" z-index="1" route>
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/class" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item replace to="/shopping" icon="cart-o" :badge="$store.getters.getAllCount">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: ""
    };
  },
  methods: {
    onClickLeft() {}
  }
};
</script>

<style lang="less" scoped>
.topset {
  position: relative;
  text-align: center;
  height: 240px;
  background: url("../assets/images/b9061276-a0a6-4e77-b7d1-a78f7dd42d3b.gif")
    no-repeat center;
  background-size: cover;
}

.touxiang {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background: url("../assets/images/微信图片_20200203085137.jpg") no-repeat
    center;
  background-size: cover;
  border-radius: 50%;
}
.Nickname {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 30px;
  margin-top: 30px;
}
.Nicknametag {
  margin-top: 40px;
  position: absolute;
  top: 0%;
  right: 0;
  transform: translateX(-50%);
  font-size: 20px;
  color: #fff;
}
.zhongjian {
  background-color: #f6f6f6;
  padding-bottom: 20px;
  overflow: hidden;
}
.dingdan {
  background-color: #fff;
  height: 200px;
  margin: 10px;
  border-radius: 20px;
  overflow: hidden;
}
h2 {
  text-align: center;
  font-size: 24px;
  color: #555;
  line-height: 50px;
  height: 50px;
}
.tupian {
  margin-bottom: 60px;
}
img {
  width: 49%;
  height: 100px;
}
</style>